import { Button, message, Form, Input } from "antd";
import { MobileOutlined, LockOutlined } from "@ant-design/icons";
import "./index.scss";
import { useNavigate } from "react-router-dom";
import {login} from "@/service/user/index"
import { useDispatch } from "react-redux";

const Login = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const Rules = {
    username: [
      {
        required: true,
        message: "请输入账号",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
      },
    ],
  };
  const onFinish = async (values) => {
    try {
      const res = await login(values)
      if (res.status !== 200) return message.error(res.msg)
      localStorage.setItem("userInfo", JSON.stringify(res.data))
      dispatch({ type: "login" });
      message.success("登录成功")
      navigate("/pan")
    } catch (e) {
      message.error(`错误:${e}`)
    }
  };

  return (
    <div className="login-box">
      <div className="login-title">登录</div>
      <div className="login-desc">云盘</div>
      <div>
        <Form
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item name="username" rules={Rules.username}>
            <Input
              placeholder="请输入账号"
              prefix={<MobileOutlined style={{ color: "gray" }} />}
            />
          </Form.Item>

          <Form.Item name="password" rules={Rules.password}>
            <Input.Password
              placeholder="请输入密码"
              prefix={<LockOutlined style={{ color: "gray" }} />}
            />
          </Form.Item>

          <Form.Item>
            <Button className="login-btn" type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Login;
